<template>
	<view class="page">

		<mescroll-uni ref="mescrollRef" @init="mescrollInit" @down="downCallback" :top="'10rpx'" @up="upCallback">
			<!-- :down="downOption" :up="upOption" -->

			<uni-list>

				<view class="item" v-for="(item, index) in listdata" :key="index">

					<text class="title">
						合同编号：{{item.contractCode}}
					</text>

					<u-line color="#efefef" :customStyle="{'margin-bottom': '30rpx','display': 'block',}"></u-line>

					<view class="text-line">
						<text class="text-name">合同生效日期:</text>
						<text class="text-value">{{item.contractTimeStart|filterNull}}</text>
					</view>

					<view class="text-line">
						<text class="text-name">合同终止日期:</text>
						<text class="text-value">{{item.contractTimeFinish|filterNull}}</text>
					</view>

					<view class="text-line">
						<text class="text-name">合同备注:</text>
						<text class="text-value">{{item.contractDesc|filterNull}}</text>
					</view>

					<view class="text-line">
						<text class="text-name">合同附件:</text>
					</view>
					
					<view style="margin: 20rpx;" v-if="item.pictureList && item.pictureList.length">
						<u-album :urls="getImglist(item.pictureList)"></u-album>
					</view>
					
					<view v-if="item.accessoryList && item.accessoryList.length" style="margin: 20rpx;display: flex;align-items: center;justify-content: space-between;"
						v-for="(pitem, pindex) in item.accessoryList" :key="pindex" class="pdf-item">
						<text style="font-size: 26rpx;color: #333;">{{pitem.nameFile}}</text>
						<text style="color: #1573FF;font-size: 26rpx;" @click="viewpdf(pitem)">查看</text>
					</view>
					


				</view>
			</uni-list>

		</mescroll-uni>


	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";

	export default {
		mixins: [MescrollMixin],
		components: {
		},
		data() {
			return {
				page: 1,
				listdata: [
				// 	{
				// 	pictureList:[
				// 		'https://t7.baidu.com/it/u=1819248061,230866778&fm=193&f=GIF',
				// 		'https://t7.baidu.com/it/u=1819248061,230866778&fm=193&f=GIF',
				// 	],
				// 	accessoryList:[
				// 		{
				// 			nameFile:'测试1',
				// 			url:'http://139.9.242.179/image-server/uni_longrent/test.pdf'
				// 		},{
				// 			nameFile:'测试2',
				// 			url:'http://139.9.242.179/image-server/uni_longrent/test.pdf'
				// 		},
				// 	]
				// },{},
				
				],
				customerId:''
			}
		},
		onLoad(op) {
			this.customerId = op.customerId;
			// this.getData();
		},
		methods: {
      getImglist(list){
        let that = this

        if(!uni.$u.test.isEmpty(list)){
          list = list.map(item=>{
            return item = that.baseImgUrl()+item
          })
          return list
        }else {
          return []
        }

      },

			getData() {

        let that = this

				this.$u.api.getCustomerContractList({
						pageNo: this.page,
						customerId:this.customerId
					}).then(
						res => {
							if (this.page == 1) {

                this.listdata = [];
              }
              this.listdata = this.listdata.concat(res);

              // this.listdata.forEach(item=>{
              //   if(!uni.$u.test.isEmpty(item.pictureList)){
              //     item.pictureList.forEach(pitem=>{
              //       pitem = that.baseImgUrl()+pitem
              //
              //       console.log('aaa', pitem)
              //       console.log('bbb', that.baseImgUrl())
              //     })
              //   }
              // })

              console.log('-------', this.listdata)

              this.mescroll.endSuccess(res.length);
            }
					)
					.catch(() => {
						this.mescroll.endErr();
					})
			},

			upCallback(page) {
				console.log("触发了上拉加载" + page);

				this.page = page.num;
				this.getData();
			},
			
			viewpdf(item) {
        // uni.showLoading()
        //
        // let fileType = 'pdf'
        // if (!uni.$u.test.isEmpty(item.url)) {
        //   fileType = item.url.split('.')[1]
        // }
        //
				// uni.downloadFile({
				// 	url: item.url,
				// 	success(res) {
        //     uni.hideLoading()
				// 		let tempPath = res.tempFilePath
				// 		uni.openDocument({
        //       showMenu:true,
				// 			filePath: tempPath,
        //       fileType: fileType,
				// 		})
				// 	},
        //   fail(e){
        //     uni.hideLoading()
        //   }
				// })

        uni.showLoading()
        let that = this

        let fileType = 'pdf'
        if (!uni.$u.test.isEmpty(item.url)) {
          fileType = item.url.split('.')[1]
        }

        uni.downloadFile({
          url: that.baseImgUrl() +item.url,
          filePath:'',
          success(res) {
            uni.hideLoading()

            console.log('下载成功了', res)

            let tempPath = res.tempFilePath
            uni.openDocument({
              showMenu:true,
              filePath: tempPath,
              fileType: fileType,
            })
          },
          fail(e){
            uni.hideLoading()
          }
        })
			},

		}
	}
</script>

<style lang="scss">
	.page {
		background-color: $grayf5;
	}

	.item {
		display: flex;
		flex-direction: column;
		background-color: white;
		border-radius: 8rpx;
		margin: 10rpx 20rpx;
		padding-bottom: 10rpx;
	}

	.title {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 28rpx;
		color: $black33;
		margin-left: 20rpx;
	}

	.text-warn {
		font-size: 24rpx;
		color: $rede9;
		margin-right: 20rpx;
	}

	.text-warn-orange {
		color: $yellowffc;
	}

	.btn-detail {
		width: 180rpx;
		height: 60rpx;
		border-radius: 50rpx;
		color: white;
		text-align: center;
		background-color: $blue15;
		font-size: 26rpx;
		line-height: 60rpx;
		margin: 10rpx 20rpx 10rpx;
		align-self: flex-end;
	}
</style>
